<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-借阅信息管理</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4">
        <span >起始时间</span>
        <el-date-picker size="small"
                        v-model="dateSelectValue"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" class="ml-2" value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-select size="small" style="width:150px;" v-model="queryParam.queryType" class="ml-2">
            <el-option value="1" label="书籍名称"></el-option>
            <el-option value="2" label="条码号"></el-option>
            <el-option value="3" label="作者"></el-option>
            <el-option value="4" label="索书号"></el-option>
            <el-option value="5" label="ISBN"></el-option>
        </el-select>
        <el-input placeholder="请输入搜索内容" size="small" style="width:200px;" v-model="queryParam.keyWord" class="ml-2"></el-input>
        <el-input size="small" placeholder="请输入借阅人" style="width:200px;" v-model="queryParam.borrowUserNameLike"  @keyup.native.enter="getTableDataMethod(true)"></el-input>

        <el-button type="primary" size="small" class="ml-2" @click="getTableDataMethod(true)">搜索</el-button>
        <h3>借阅列表</h3>

        <el-table :data="tableData" v-loading="tableDataLoading" class="mt-4">
            <el-table-column prop="ticketNumber" label="条形码"></el-table-column>
            <el-table-column prop="bookName" label="书籍名称"></el-table-column>
            <el-table-column prop="isbn" label="isbn"></el-table-column>
            <el-table-column prop="author" label="著者"></el-table-column>
            <el-table-column prop="indexBookNumber" label="索书号"></el-table-column>
            <el-table-column prop="shelfMark" label="排架号"></el-table-column>

            <el-table-column label="借出日期">
                <template slot-scope="scope">
                        <span v-if="scope.row.rentDate">
                            {{scope.row.rentDate.split(" ")[0]}}
                        </span>
                </template>
            </el-table-column>
            <el-table-column label="应还日期">
                <template slot-scope="scope">
                        <span v-if="scope.row.shouldBackDate">
                            {{scope.row.shouldBackDate.split(" ")[0]}}
                        </span>
                </template>
            </el-table-column>

            <el-table-column label="实际归还日期">
                <template slot-scope="scope">
                        <span v-if="scope.row.backDate">
                            {{scope.row.backDate.split(" ")[0]}}
                        </span>
                </template>
            </el-table-column>
            <el-table-column prop="accountName" label="借阅人账号"></el-table-column>
            <el-table-column prop="fullName" label="借阅人名称"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.status == 3">尚未还书</el-tag>
                    <el-tag type="info" v-if="scope.row.status == 1">借阅中</el-tag>
                    <el-tag type="success" v-if="scope.row.status == 2">已还</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="是否已邮件通知">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.emailNotification == 1">是</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="emailNotification(scope.row)" v-if="scope.row.status == 3">邮件通知</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-pagination background layout="total,sizes,prev, pager, next" :total="tableDataPaging.total"
                   :page-sizes="[10, 20, 50]"
                   prev-text="上一页" next-text="下一页"
                   :page-size="tableDataPaging.pageSize"
                   :current-page="tableDataPaging.currentPage"
                   @current-change="tableDataPagingChange"
                   @prev-click="tableDataPagingChange" @next-click="tableDataPagingChange"
                   @size-change="tableDataPagingSizeChange"
                   style="float:right;margin-top: 40px;padding-bottom:50px;">
    </el-pagination>

    </div>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                queryParam:{
                    borrowUserNameLike:"",
                    bookName:"",
                    queryType:"1",
                    keyWord:""
                },
                tableData : [],
                tableDataLoading : false,
                tableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                dateSelectValue:'',

            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                that.getTableDataMethod(true);
            });
        },
        methods: {
            tableDataPagingChange(val) {
                let that = this;
                that.tableDataPaging.currentPage = val;
                that.getTableDataMethod();
            },
            tableDataPagingSizeChange(val) {
                let that = this;
                that.tableDataPaging.pageSize = val;
                that.getTableDataMethod();
            },

            //获取表格的数据
            getTableDataMethod(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.tableDataPaging.currentPage = 1;
                }
                const {borrowUserNameLike,queryType,keyWord} = this.queryParam
                let queryData = {
                    borrowUserNameLike: $.trim(borrowUserNameLike),
                    queryType: $.trim(queryType),
                    keyWord: $.trim(keyWord),
                    pageNum: this.tableDataPaging.currentPage,
                    pageSize: this.tableDataPaging.pageSize,
                    identity:"admin"
                }
                if(that.dateSelectValue){
                    queryData.pubulishStartTime = that.dateSelectValue[0];
                    queryData.pubulishEndTime = that.dateSelectValue[1];
                }
                this.tableDataLoading = true;
                that.tableData = [];
                requestApi("record/getRecordHistoryList",queryData,'post',function(res){
                    that.tableDataLoading = false;
                    if (res.code === 0) {
                        that.tableData = res.data.list;
                        that.tableDataPaging.total = res.data.total;
                    }

                });
            },

            emailNotification(row){
                let that = this;
                if(!row.id){
                    that.$message.error("尚无id");
                    return;
                };
                that.deleteLoading = true;
                requestApiTB("record/emailNotification",{"id" : row.id,"userName":row.userName,"bookName":row.bookName}, "POST", function(res){
                    that.deleteLoading = false;
                    if(res.code === 0){
                        alert("通知成功");
                        that.getTableDataMethod(true);
                    }else{
                        that.$message.error(res.msg);
                    }
                });
            }




        }
    })
</script>
</html>